import React, { Component } from 'react'
import { reqgetcate,reqgetgoods } from '../../http/api'
import "../Cate/Cate.less"
// import { RouterProps } from 'react-router-dom'

export default class Cate extends Component {
  constructor(){
    super()
    this.state={
      catelist:[],
      goodslist:[],
      fid:1
    }
  }

  componentDidMount(){
    reqgetcate().then((res)=>{
      if(res.data.code === 200){
        this.setState({
          catelist:res.data.list,
        })
      }
    })
    reqgetgoods({fid:1}).then((res)=>{
      if(res.data.code === 200){
        this.setState({
          goodslist:res.data.list,
        })
      }
    })
  }

  changePage(key){
    reqgetgoods({fid:key}).then((res)=>{
      if(res.data.code === 200){
        this.setState({
          goodslist:res.data.list,
        })
      }
    })
  }

  goDetail(id){

    /* 跳转到detail页面 */
    this.props.history.push("/detail?id="+id+"&type=1");
  }


  render() {
    let {catelist,goodslist} = this.state;
    console.log(goodslist);
    return (
      <div className='cate-con'>
        <div className='left'>
          {catelist.map((item)=>{
            return(
              <p key={item.id} onClick={()=>this.changePage(item.id)}>{item.catename}</p>
            )
          })}
        </div>
        <div className='right'>
          {goodslist.map((item)=>{
            return(
                <div key={item.id} className='box' onClick={()=>this.goDetail(item.id)} >
                <div className='imgbox'>
                  <img src={'http://localhost:1000'+item.img} alt="" />
                </div>
                <div>
                  <p>{item.catename}</p>
                  <p>{item.price}</p>
                  <div>加入购物车</div>
                </div>
              </div>
            )
          })}
        </div>
      </div>
    )
  }
}
